<template>
	<div class="container">
		<!-- 搜索 -->
		<search-Bar
			:searchBarData="searchBarData"
			@refreshSearch="refreshList"
		></search-Bar>
		<section>
			<div>
				<my-table
					:table-data="tableData"
					:col-configs="colConfigs"
					:list-loading="listLoading"
					:total="total"
					:page-size="listQuery.pagesize"
					@refreshList="getList"
					@sortChange="sortChange"
				>
					<el-table-column slot="opt" label="操作" width="120px">
						<template slot-scope="{ row }">
							<el-tooltip content="查看详情" placement="top">
								<span class="iconfont bg-edit" @click="handleDetail(row)"
									>&#xe66c;</span
								>
							</el-tooltip>
							<el-tooltip content="信息修改" placement="top">
								<span
									class="iconfont bg-stop"
									@click="
										dialogFormVisibleUpdate = true
										handleUate(row)
									"
									>&#xe66d;</span
								>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column slot="patient_class" label="就诊类型" width="120px">
						<template slot-scope="{ row }">
							<span v-if="row.patient_class === 0">门诊</span>
							<span v-if="row.patient_class === 1">住院</span>
							<span v-if="row.patient_class === 2">急诊</span>
							<span v-if="row.patient_class === 3">体检</span>
							<span v-if="row.patient_class === 4">普通</span>
						</template>
					</el-table-column>
					<el-table-column slot="patient_sex" label="患者性别" width="120px">
						<template slot-scope="{ row }">
							<span v-if="row.pateint_sex === 0">男</span>
							<span v-if="row.pateint_sex === 1">女</span>
							<span v-if="row.pateint_sex === 2">未知</span>
						</template>
					</el-table-column>
				</my-table>
			</div>
			<div class="icon" @click="drawer = true">
				<span class="iconfont">&#xe667;</span>
			</div>
		</section>

		<el-dialog
			title="信息修改"
			:visible.sync="dialogFormVisibleUpdate"
			center　
			width="500px"
		>
			<el-form :model="formUpdate" :label-position="labelPosition">
				<el-form-item label="身份证号:" label-width="120px">
					<el-input
						v-model="formUpdate.id_card_no"
						placeholder="身份证号"
						autocomplete="off"
					></el-input>
				</el-form-item>
				<el-form-item label="手机号:" label-width="120px">
					<el-input
						v-model="formUpdate.phone"
						placeholder="手机号"
						@input="phoneChange"
						autocomplete="off"
					>
					</el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisibleUpdate = false">取 消</el-button>
				<el-button type="primary" @click="updateMsg">确 定</el-button>
			</div>
		</el-dialog>

		<el-drawer
			:visible.sync="drawer"
			:with-header="false"
			:direction="direction"
			:size="drawerWidth"
		>
			<div class="demo-drawer__content">
				<div class="drawer_title">
					<el-row>
						<el-col :span="4">自定义列表</el-col>
						<el-col :span="2" :offset="18">
							<span class="iconfont drawer_icon" @click="drawer = false"
								>&#xe686;</span
							>
						</el-col>
					</el-row>
				</div>
				<selfcoloumn></selfcoloumn>
			</div>
		</el-drawer>
		<div class="robot">
			<!-- 	<robot></robot> -->
		</div>
	</div>
</template>

<script>
import selfcoloumn from './selfcoloumn.vue'
import searchBar from '@/components/searchBar'
import robot from './robot.vue'
import myTable from 'components/myTable'
import { checkPhone } from '@/utils/validate'
import { getList, updatePatient } from '@/api/archive-record'
import { validPhone, validIdCard } from '@/utils/validate.js'
export default {
	name: 'taskManager',
	components: {
		myTable,
		searchBar,
		selfcoloumn,
		robot,
	},
	data () {
		return {
			listQuery: {
				pagesize: 10,
				pageindex: 1,
				// org_code: 41952988
			},
			colConfigs: [
				// todo 字段缺失
				{
					type: 'index',
					label: '序号',
					width: '50px'
				},
				{ slot: 'opt' },
				{
					prop: 'patient_name',
					label: '患者姓名',
					width: '80px'
				},
				{
					prop: 'med_rec_no',
					label: '病历号',
				},
				{ slot: 'patient_class' },
				{
					prop: 'perform_depart_name',
					label: '检查科室',
					width: '80px'
				},
				{
					prop: 'exam_type',
					label: '检查类型',
					width: '80px'
				},
				{
					prop: 'exam_item',
					label: '检查项目',
					width: '80px'
				},
				{
					prop: 'mobile_phone',
					label: '手机号码',
					width: '180px'
				},
				{
					prop: 'id_card_no',
					label: '身份证号',
					width: '200px'
				},
				{
					prop: 'disk_space',
					label: '存储容量',
					sortable: true,
					width: '100px'
				},
				{
					prop: 'perform_time',
					label: '检查时间',
					sortable: true,
					width: '180px'
				},
				{
					prop: 'report_time',
					label: '报告时间',
					sortable: true,
					width: '180px'
				},
				{
					prop: 'archive_time',
					label: '归档时间',
					sortable: true,
					width: '180px'
				},
			],
			tableData: [],
			total: null,
			listLoading: false,
			labelPosition: 'left',
			dialogFormVisibleUpdate: false,
			formUpdate: {
				mobile_phone: null,
				id_card_no: null,
				observation_id: null, // 患者唯一编号
			},
			searchBarData: {
				timeTypeList: [
					{ label: '检查时间', value: 1 },
					{ label: '归档时间', value: 4 },
					{ label: '审核时间', value: 3 },
					{ label: '报告时间', value: 2 }
				],
				customQueryList: [
					{ label: '检查编号', value: 0 },
					{ label: '患者编号', value: 1 },
					{ label: '病历号', value: 2 },
					{ label: '患者姓名', value: 3 },
					{ label: '身份证号', value: 4 },
					{ label: '申请单号', value: 5 },
					{ label: '门诊号', value: 6 },
					{ label: '住院号', value: 7 },
				]
			},
			drawer: false,
			drawerWidth: '50%',
			direction: 'rtl',
			columnVal: [ 1, 4 ],
			positionX: 0,
			positionY: 0,
		}
	},
	computed: {},
	created () { },
	mounted () {
		this.getList()
		console.log( this.tableData )
	},
	methods: {
		getList ( val ) {
			// 获取列表统计
			const params = Object.assign( this.listQuery, val )
			console.log( params );
			getList( params ).then( res => {
				this.tableData = res.data || []
				this.total = res.page.total_count || 0
			} )
		},
		sortChange ( val ) {
			//  排序
			console.log( val )
		},
		refreshList ( val ) {
			this.getList( val )
			console.log( val );
		},
		handleDetail ( row ) {
			// 查看详情
			this.$router.push( {
				name: 'ArchiveDetail',
				query: { id: row.id },
			} )
		},
		handleUate ( row ) {
			// 补全信息
			this.dialogFormVisibleUpdate = true
			this.formUpdate = {
				observation_id: row.id,
				id_card_no: row.id_card_no,
				phone: row.mobile_phone
			}
		},
		updateMsg () {

      /*
       * 信息修改
       * this.dialogFormVisibleUpdate = true
       * todo 校验格式
       */
			if ( this.formUpdate.mobile_phone ) {
				checkPhone( formUpdate.mobile_phone )
			}
			updatePatient( this.formUpdate ).then( res => {
				if ( res.code === 0 ) {
					this.getList()
				} else {
					this.$message.fail( res.code )
				}
			} )
		},
		phoneChange () {
			const reg = /^1[3456789]\d{9}$/
			if (
				this.formUpdate.mobile_phone.length >= 11
				&& !reg.test( this.formUpdate.mobile_phone )
			) {
				alert( '请输入正确的手机号码格式' )
			}
		},
		setColumn () {
			// 自定义列表
		},
		cancelForm () {
			// 取消
		},
		submitColumn () {
			// 取消
		},
	},
	watch: {},
	filter: {},
}
</script>
<style scoped lang="less">
.container {
	padding: 0 25px;
	// overflow-y: hidden;
	section {
		position: relative;
		.icon {
			width: 30px;
			height: 30px;
			position: absolute;
			right: -30px;
			top: 10px;
			color: #0a70b0;
		}
	}
	.btns {
		margin-bottom: 20px;
	}
	.data {
		// height: 161px;
		padding: 43px 0;
		box-shadow: 0px 0px 14px 0px rgba(1, 1, 100, 0.1);
		border-radius: 8px;
		margin-bottom: 42px;
		text-align: center;
		div {
			height: 75px;
			width: 12%;
			display: inline-block;
			border-right: 1px solid #ddd;
			text-align: center;
			h2 {
				font-size: 16px;
				font-weight: normal;
				height: 42px;
				line-height: 22px;
				color: #333333;
			}
			h3 {
				height: 42px;
				font-size: 30px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				line-height: 42px;
				color: @49B523;
			}
		}
	}
	.cell {
		.el-button {
			padding: 0;
		}
	}
	.el-input {
		width: 200px !important;
	}
	#el-drawer {
		width: 50%;
	}
	.drawer_title {
		width: 100%;
		height: 40px;
		line-height: 40px;
		background-color: #f5f5f5;
		color: #333333;
		font-weight: 500;
		text-indent: 20px;
		margin: 0 0 20px 0;
		.el-row {
			margin: 0;
		}
	}
	.el-col-4 {
		text-align: left;
	}
	.drawer_icon {
		font-size: 16px;
		color: #333;
	}
	.robot {
		position: absolute;
		bottom: -6vw;
		right: 0;
		z-index: 10000;
	}
	.bg-stop {
		background-color: #49b523;
	}
}
</style>
